<template>
  <div>
    <a-row>
      <a-input-search v-model:value="searchKey" placeholder="请输入相关信息" enter-button="搜索"
        style="width: 250px; margin-bottom: 20px;" @search="handleQuery()" />
      <a-button style="margin-left: 10px;" type="dashed" @click="reset">重置</a-button>
      <a-button type="primary" style="margin-left: auto; margin-bottom: 20px; width: 100px;" @click="addItem">
        <template #icon><plus-outlined /></template>新增
      </a-button>
    </a-row>
    <a-row>
      <a-col :span="8" v-for="(wxlink, index) in wxData" :key="wxlink.id" style="margin-bottom: 15px;">
        <a-card hoverable style="width: 95%;">
          <a-card-meta :title="wxlink.linkName" :description="wxlink.linkIntroduction" />
          <template #cover>
            <a-descriptions bordered>
              <a-descriptions-item :span="4" label="链接地址">
                <a :href="wxlink.linkSource" target="_blank">{{ wxlink.linkSource }}</a>
              </a-descriptions-item>
            </a-descriptions>
          </template>
          <template #actions>
            <edit-outlined key="edit" @click="editItem(wxlink)" />
            <delete-outlined key="delete" @click="deleteItem(wxlink)" />
          </template>
        </a-card>
      </a-col>
    </a-row>
    <AntdZh>
      <a-pagination v-model:current="query.pageNum" v-model:pageSize="query.pageSize" :total="total" @change="getList" />
    </AntdZh>

    <!-- 新增/编辑弹窗 -->
    <AntdConfirmModal :title="title ? '新增链接' : '编辑链接'" ref="modalRef" width="700px" :keepSlot="false"
      @confirm="submitForm">
      <a-form :model="form" name="basic" :label-col="{ span: 10 }">
        <a-row>
          <a-col :pull="4" :span="20">
            <a-form-item label="链接名字" name="linkName" :rules="[{ required: true, message: '请输入链接名字' }]">
              <a-input v-model:value="form.linkName" style="width: 400px;" placeholder="请输入链接名字" />
            </a-form-item>
          </a-col>
          <a-col :pull="4" :span="20">
            <a-form-item label="链接地址" name="linkSource" :rules="[{ required: true, message: '请输入链接地址' }]">
              <a-input v-model:value="form.linkSource" style="width: 400px;" placeholder="请输入链接地址" />
            </a-form-item>
          </a-col>
          <a-col :pull="4" :span="20">
            <a-form-item label="简介" name="linkIntroduction">
              <a-input v-model:value="form.linkIntroduction" style="width: 400px;" placeholder="请输入简介" />
            </a-form-item>
          </a-col>
          <a-col :pull="4" :span="20">
            <a-form-item label="存放目录类别" name="linkType">
              <a-input v-model:value="props.linkType" style="width: 400px;" disabled="true" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </AntdConfirmModal>
  </div>
</template>
<script setup>
import { EditOutlined, DeleteOutlined, PlusOutlined, InboxOutlined } from '@ant-design/icons-vue';
import { queryList, deleteOne, updateOne, createOne } from "@/api/salvage/wxlinks.js";
import request from '@/utils/request'
import useApp from "@/hooks";
const { $, proxy } = useApp();
const props = defineProps({
  linkType: {
    type: String,
  },
});
const modalRef = ref(null);
const wxData = ref()
const total = ref(1)
const searchKey = ref();
const form = ref({});
const title = ref(null);
const query = ref({ pageNum: 1, pageSize: 8, sortBy: 'id', order: 'DESC', searchKey: '', linkType: props.linkType });
watch(() => props.linkType, () => {
  getList()
});
// 新增
function addItem() {
  title.value = true;
  form.value = {};
  modalRef.value.openModal();
}

// 删除
function deleteItem(e) {
  deleteOne(e.id).then((res) => {
    $.showToast({
      title: "删除成功",
      icon: "success",
    });
    getList();
  });
};

//编辑
function editItem(e) {
  form.value = e;
  title.value = false;
  modalRef.value.openModal();
}

// 提交
function submitForm() {
  form.value.linkType = props.linkType
  if (form.value.linkSource == null) {
    $.showToast({
      title: "链接不允许为空",
      icon: "warn",
    });
  } else {
    // 新建
    if (title.value == true) {
      createOne(form.value).then((res) => {
        $.showToast({
          title: "新建成功",
          icon: "success",
        });
        getList()
      });
    } else if (title.value == false) { //编辑
      updateOne(form.value).then((res) => {
        $.showToast({
          title: "修改成功",
          icon: "success",
        });
        getList()
      });
    }
    modalRef.value.closeModal()
  }
}

// 获取列表
function getList() {
  query.value.linkType = props.linkType
  queryList(query.value).then((res) => {
    wxData.value = res.content
    total.value = res.totalElements
  });
}
getList();

/** 搜索按钮操作 */
function handleQuery() {
  query.value.searchKey = searchKey;
  getList();
}

/** 表单重置 */
function reset() {
  searchKey.value = '';
  query.value = { pageNum: 1, pageSize: 8, sortBy: 'id', order: 'DESC', searchKey: '', linkType: props.linkType }
  getList();
}
</script>